<template>
  <div class="relative-box">
    <div class="left-table" :style="{width: 100 / 12 * month + '%'}">
      <el-table class="group-operation-table left-table" :data="[1]" border :show-header="false">
        <template v-for="(item, index) in tableData">
          <el-table-column
            :label="item.month"
            :key="index"
            :class-name="planStatusMap[item.planStatus]"
            header-align="center"
            align="center"
            v-if="Number(item.planMonth) <= month">
              <div @click="showPopup(item, index)" :class="{ pointer: month >= Number(item.planMonth) }">
                <div>{{item.planMonth}}月</div>
                <!-- <div>计划：¥{{ item.plan }}</div>
                <div>实际：¥{{ item.practical }}</div> -->
              </div>
          </el-table-column>
        </template>
      </el-table>
      <div ref="divider" class="divider">
        <i class="el-icon-caret-bottom font-size-20"></i>
        <div class="divider-line"></div>
      </div>
    </div>
    <div class="right-table" :style="{width: 100 / 12 * (12 - month) + '%'}">
      <el-table class="group-operation-table right-table" :data="[1]" border :show-header="false">
        <template v-for="(item, index) in tableData">
          <el-table-column
            :key="index"
            :label="item.month"
            :class-name="planStatusMap[item.planStatus]"
            header-align="center"
            align="center"
            v-if="Number(item.planMonth) > month">
              <div  class="pointer">
                <div>{{item.planMonth}}月</div>
                <!-- <div>计划：¥{{ item.plan }}</div>
                <div>预测：¥{{ item.practical }}</div> -->
              </div>
          </el-table-column>
        </template>
      </el-table>
    </div>

    <operation-popup ref="operationPopup" :dialog-type="dialogType" :show-month="showMonth" :operation-type="operationType" :select-time="selectTime" v-if="selectTime"></operation-popup>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import operationPopup from './operationPopup';
export default {
  props: {
    selectTime: {
      type: String,
      default: '',
    },
    tableData: {
      type: Array,
      default: [],
    },
    tableTypeShow: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      planStatusMap: {
        1: 'bg-color-C2F4CB',
        2: 'bg-color-FDC9C9',
        3: 'bg-color-DFFFE6',
        4: 'bg-color-FFF1F1',
      },
      operationType: null,
      dialogType: null,
      showMonth: null
      //1：实际执行符合计划，2：实际执行未达到计划，3：预测符合计划， 4：预测未达到计划
    };
  },
  methods: {
    showPopup(item, index) {
      // if (index + 1 > this.month) {
      //   return;
      // }
      this.operationType = 1;
      if(this.tableTypeShow == '实际执行年累计收入（权责）') {
         this.dialogType = 9
      } else if(this.tableTypeShow == '实际执行年累计收入（现金流）') {
        this.dialogType = 10
      } else if(this.tableTypeShow == '实际执行年累计支出（现金流）') {
        this.dialogType = 11
      }
      this.showMonth = Number(item.planMonth)
      this.$nextTick(() => {
        this.$refs.operationPopup.showFurther = true;
        this.$refs.operationPopup.getTreeList();
      });
    },
  },
  computed: {
    month() {
      return dayjs(this.selectTime).month() + 1;
    },
  },
  components: {
    operationPopup,
  },
};
</script>
<style lang="scss" scoped>
.relative-box {
  position: relative;
  margin-top: 10px;
  display: flex;

  .left-table {
    position: relative;
    .divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 0;
      right: -10px;
      z-index: 99;
      height: 100%;
      i {
        width: 20px;
        height: 20px;
        margin-top: -20px;
      }
      .divider-line {
        width: 2px;
        height: 100%;
        background-color: #000;
      }
    }
  }
  
}
.group-operation-table {
  margin-bottom: 0;
  tbody {
    tr {
      &:hover {
        td {
          background: unset;
        }
        .bg-color-C2F4CB {
          background: #C2F4CB !important;
        }
        .bg-color-FDC9C9 {
          background: #FDC9C9 !important;
        }
        .bg-color-DFFFE6 {
          background: #DFFFE6 !important;
        }
        .bg-color-FFF1F1 {
          background: #FFF1F1 !important;
        }
      }
    }
  }
}
</style>